<template>
  <div class="aillo-group-list">
    <div class="data-tree">
      <div class="data-tree__title" @click="reversalgroupListVisible">
        <div class="data-tree__title__left">
          <i v-if="!grouplists.visible" class="tico tico-right-large" />
          <i v-if="grouplists.visible" class="tico tico-down-large" />
          <span class="data-tree__title__left__name">群组</span>
          <span class="data-tree__title__left__number">{{ grouplists.data.length }}</span>
        </div>
      </div>
      <div v-show="grouplists.visible">
        <GroupCard :GroupInfo="item" v-for="(item, index) in grouplists.data" :key="index" />
      </div>
    </div>
  </div>
</template>

<script>
import GroupCard from './GroupCard'

export default {
  components: { GroupCard },
  props: ['groupList'],
  // computed: {
  //   ...mapState('app', [ 'unreadList' ]),
  //   uneradNum: function () {
  //     const temp = Object.values(this.unreadList)
  //     let number = 0
  //     for (let i = 0; i < temp.length; i++) {
  //       number += temp[i]
  //     }
  //     return number
  //   }
  // },
  data () {
    return {
      grouplists: {
        visible: false,
        data: this.groupList
      }
    }
  },
  watch: {
    groupList: {
      handler (data) {
        this.grouplists.data = data
      }
    }
  },
  methods: {
    reversalgroupListVisible () {
      this.grouplists.visible = !this.grouplists.visible
    }
  }
}
</script>

<style lang="scss" scoped>
.aillo-group-list {
  div {
    user-select: none;
  }

  .data-tree {
    width: 100%;
    cursor: pointer;

    &__title {
      height: 30px;
      display: flex;
      align-items: center;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      &__left {
        i {
          margin-left: 10px;
          margin-right: 10px;
          font-size: 10px;
        }
        &__name {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: bold;
        }

        &__number {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #999;
          margin-left: 9px;
        }
      }

      &__right {
        background-color: #e93323;
        width: 16px;
        height: 16px;
        border-radius: 100px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }
    }
  }
}
</style>
